<form class="pure-form pure-form-aligned" method="post" action="<?php echo URL; ?>login/create" onsubmit="return validate(this);">
	<fieldset>
		<legend>
			Sign Up
		</legend>
		<div class="pure-control-group">
			<label for="name">Username</label>
			<abbr title="3-16 Characters (Letters and numbers only)">
				<input id="username" type="text" name="userName" placeholder="Username" required autocomplete="off" pattern="[A-Za-z0-9]{3,16}"/>
			</abbr>
		</div>

		<div class="pure-control-group">
			<label for="password">Password</label>
			<abbr title="6-16 Characters (Letters and numbers only)">
				<input id="password" type="password" name="password" placeholder="Password" required autocomplete="off" pattern="[A-Za-z0-9]{6,16}"/>
			</abbr>
		</div>

		<div class="pure-control-group">
			<label for="confirm-password">Confirm Password</label>
			<abbr title="3-16 Characters (Letters and numbers only)">
				<input id="confirm-password" type="password" name="confirm-password" placeholder="Password" required autocomplete="off" pattern="[A-Za-z0-9]{6,16}"/>
			</abbr>
		</div>

		<div class="pure-control-group">
			<label for="confirm-password">First Name</label>
			<abbr title="max 22 Characters (Letters only)">
				<input id="firstName" type="text" name="firstName" placeholder="First Name" required pattern="[A-Za-z]{2,22}"/>
			</abbr>
		</div>

		<div class="pure-control-group">
			<label for="confirm-password">Last Name</label>
			<abbr title="max 22 Characters (Letters only)">
				<input id="lastName" type="text" name="lastName" placeholder="Last Name" required pattern="[A-Za-z]{2,22}"/>
			</abbr>
		</div>

		<div class="pure-control-group">
			<label for="confirm-password">E-mail</label>
			<abbr title="Valid email address">
				<input id="email" type="email" name="email" placeholder="Last Name" required />
			</abbr>
		</div>

		<div class="pure-controls">
			<?php 
		      if ( isset($this->error))
		          echo '<h4 style="color: red;">Wrong Username and/or Password</h4>';
		    ?>

			<button type="submit" class="pure-button pure-button-primary">
				Submit
			</button>
		</div>
	</fieldset>
</form>

<script>
	function validate(form) {
		var e = form.elements;

		/* Your validation code. */

		if (e['password'].value != e['confirm-password'].value) {
			alert('Your passwords do not match. Please type more carefully.');
			return false;
		}
		return true;
	}
</script>

